<template>
  <div class="header">
    <div class="btn" @click="exit">
      <i class="iconfont icon-close"></i>
    </div>
    <h1>浏览量分布图</h1>
    <div class="showTime">统计时间：2020/12/02 00:00:00 -- {{ text }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      timer: null,
      text: '2020/12/02 00:00:00'
    }
  },
  methods: {
    // 返回首页
    exit() {
      this.$router.push('/main')
    }
  },
  mounted() {
    let dt = null
    this.timer = setInterval(() => {
      dt = new Date()
      var y = dt.getFullYear()
      var mt = dt.getMonth() + 1
      var day = dt.getDate()
      var h = dt.getHours() //获取时
      var m = dt.getMinutes() //获取分
      var s = dt.getSeconds() //获取秒
      if (h < 10) {
        h = '0' + h
      }
      if (s < 10) {
        s = '0' + s
      }
      if (m < 10) {
        m = '0' + m
      }
      this.text = y + '/' + mt + '/' + day + '   ' + h + ':' + m + ':' + s
    }, 1000) //開始运行
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  }
}
</script>
<style lang="scss" scoped>
.header {
  height: 60px;
  width: 100%;
  position: relative;
  background: url(/images/head_bg.png) no-repeat top center;
  background-size: 100% 100%;
}
.header h1 {
  font-size: 25px;
  color: #fff;
  text-align: center;
  line-height: 25px;
}
.header .showTime {
  position: absolute;
  top: 0;
  right: 60px;
  width: auto;
  height: 60px;
  line-height: 25px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}
.btn {
  position: absolute;
  right: 20px;
  top: 4px;
  z-index: 200;
  i {
    color: white;
  }
}
.btn:hover {
  cursor: pointer;
}
</style>
